<template>
  <topZJM></topZJM>
  <topBottomLzm></topBottomLzm>
  <div style="height: 100%;">
    <el-card style="margin: 0 auto; width: 80%;
    display: flex;justify-content: center;align-items: center;">

  
<div class="app">
  <nav>
    <button @click="currentPage = 'payment'">缴费页面</button>
    <button @click="currentPage = 'record'">缴费记录</button>
  </nav>

  <!-- 缴费页面 -->
  <div v-if="currentPage === 'payment'" class="content">
    <div class="payment-container">
      <div v-for="(payment, index) in paymentData" :key="index" class="payment-block" 
      style="display: flex;">
        <div class="payment-info">
          <p>缴费名称：{{ payment.name }}</p>
          <p>拖欠时间：{{ payment.overdue }}</p>
          <p>代缴金额：￥{{ payment.amount }}</p>
        </div>
        <button @click="payFee(index)" :disabled="payment.paid">支付</button>
        <!-- 显示已缴费标识 -->
        <div v-if="payment.paid" class="paid-indicator">
          <i class="fas fa-check-circle"></i>
          <span class="paid-text" style="font-size: 28px;">已缴费</span>
        </div>
      </div>
    </div>
    <button class="pay-all-btn" @click="openPaymentDialog">一键支付</button>
    <div v-if="showDialog" class="dialog">
      <p>选择要支付的项目：</p>
      <div v-for="(payment, index) in paymentData" :key="'dialog-' + index">
        <input type="checkbox" v-model="selectedPayments" :value="index">
        <label>{{ payment.name }} - ￥{{ payment.amount }}</label>
      </div>
      <button @click="paySelectedFees">确认支付</button>
      <button @click="showDialog = false">取消</button>
    </div>
  </div>

  <!-- 缴费记录页面 -->
  <div v-if="currentPage === 'record'" class="record-page" style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
    <h2>缴费记录</h2>
    <table style="width: 600px;">
      <thead>
        <tr>
          <th>缴费名称</th>
          <th>支付时间</th>
          <th>支付金额</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(record, index) in paymentRecords" :key="index">
          <td>{{ record.name }}</td>
          <td>{{ record.date }}</td>
          <td>￥{{ record.amount }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</el-card>
  </div>

  <div class="bottom">
    <footer0></footer0>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import topBottomLzm from '@/views/second-lzm'
import topZJM from '@/views/top-zjm/top.vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'
const currentPage = ref('payment');

const paymentData = ref([
  { name: '2024年取暖费', overdue: '6个月', amount: 1800, paid: false },
  { name: '2024年卫生费', overdue: '6个月', amount: 200, paid: false },
  { name: '2024年管理费', overdue: '6个月', amount: 500, paid: false },
  { name: '2024年办公费', overdue: '6个月', amount: 100, paid: false }
]);

const showDialog = ref(false);
const selectedPayments = ref([]);
const paymentRecords = ref([]);

function payFee(index) {
  const payment = paymentData.value[index];
  if (!payment.paid) {
    payment.paid = true;
    
    // 记录支付记录，确保记录的金额是支付时的金额
    paymentRecords.value.push({
      name: payment.name,
      date: new Date().toLocaleDateString(),
      amount: payment.amount
    });
  }
}

function openPaymentDialog() {
  showDialog.value = true;
}

function paySelectedFees() {
  selectedPayments.value.forEach(index => {
    const payment = paymentData.value[index];
    if (!payment.paid) {
      payment.paid = true;
      
      // 记录支付记录，确保记录的金额是支付时的金额
      paymentRecords.value.push({
        name: payment.name,
        date: new Date().toLocaleDateString(),
        amount: payment.amount
      });
    }
  });
  showDialog.value = false;
  selectedPayments.value = [];
}
</script>

<style scoped lang="scss">
.app {
  width: 80%;
  margin: 0 auto;
}

nav {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

nav button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

nav button:hover {
  background-color: #f0f0f0;
}

.content {
  width: 100%;
  text-align: center;
}

.payment-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.bottom{
        height:45px;
        width: 100%;
        position: absolute;
        bottom: 0;
        margin-left:-10px;
    }
.payment-block {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}

.payment-info {
  font-size: 14px;
}

button {
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #4CAF50;
  color: white;
}

.pay-all-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.pay-all-btn:hover {
  background-color: #45a049;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.dialog input[type="checkbox"] {
  margin-right: 10px;
}

.dialog button {
  margin-top: 10px;
  padding: 5px 10px;
}

.dialog button:first-of-type {
  background-color: #4CAF50;
  color: white;
}

.dialog button:first-of-type:hover {
  background-color: #45a049;
}

.dialog button:last-of-type {
  background-color: #f44336;
  color: white;
}

.dialog button:last-of-type:hover {
  background-color: #e53935;
}

.record-page {
  text-align: center;
}

.record-page table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.record-page th, .record-page td {
  border: 1px solid #ddd;
  padding: 8px;
}

.record-page th {
  background-color: #f2f2f2;
}

.paid-indicator {
  position: absolute;
  z-index:8;
  top: 50%;
  right: 30%;
  color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paid-indicator i {
  margin-right: 5px;
}

.paid-text {
  font-size: 12px;
  font-style: italic;
  color: green;
}
</style>
